<template>
    <div class="item">
        <div class="short">
            <InputText type="text" v-model="newlong.long" v-if="newlong.edit" style="width: 100%;" />
            <span v-else>{{ long.original_url }}</span>
        </div>
        <div class="note">
            <InputText type="text" v-model="newlong.note" v-if="newlong.edit" style="width: 100%;" />
            <span v-else>{{ long.note }}</span>
        </div>
        <div class="count">{{ long.click_count }}</div>
        <div class="active">
            <Button type="button" icon="pi pi-check" severity="success" @click="savelong(long)" v-if="newlong.edit" />
            <Button type="button" icon="pi pi-pencil" severity="warning" @click="edit()" v-else />
            
            <Button type="button" icon="pi pi-minus-circle" severity="warning" @click="edit()" v-if="newlong.edit" />
            <Button type="button" icon="pi pi-times" severity="danger" @click="deletelong(long)" v-else  />
        </div>
    </div>
</template>

<script setup>
import Button from 'primevue/button';
import { defineProps, ref, inject, onMounted } from 'vue'
import InputText from 'primevue/inputtext';

// 从祖先组件中注入函数
const deletelong = inject('deletelong');
const updatelong = inject('updatelong');

// 定义 props
const props = defineProps({
  long:Object
})

// 编辑和备注信息
const newlong = ref({
    note:null,
    long:null,
    oldlong:null,
    short_code:null,
    oldnote:null,
    id:null,
    edit:false
})
// 初始化newlong
onMounted(() => {
  if (props.long) {
    newlong.value.note = props.long.note;
    newlong.value.long = props.long.original_url;
    newlong.value.oldlong = props.long.original_url;
    newlong.value.oldnote = props.long.note
    newlong.value.short_code = props.long.short_code;
    newlong.value.id = props.long.id
  }
});


// 编辑按钮
function edit(){
    newlong.value.edit = !newlong.value.edit
}

// 保存按钮
function savelong(data){
    updatelong(newlong.value)
    newlong.value.edit = !newlong.value.edit
}

</script>

<style scoped lang="less"> 
    .item{
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #e2e8f0;

        &:hover{
            background-color: #f8fafc;
        }

        &>*{
            // flex: 1;
            width: 33%;
            height: 50px;
            line-height: 50px;
            padding-left: 10px;
        }
        &>.active{
            display: flex;
            // flex: 0.5;
            width: 17%;
            align-items: center;
            &>:nth-child(1){
                margin-right: 10px;
            }
        }
        &>.short{
            display: flex;
            align-items: center;
            padding-left: 40px;
        }
        &>.count{
            // flex: 0.5;
            width: 17%;
        }
    }
</style>